<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<%--JSP头部复用--%>
<jsp:include page="common/head.jsp" flush="true"></jsp:include>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">用户信息</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <nav class="navbar navbar-expand-lg navbar-light">
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <form class="form-inline my-2 my-lg-0" method="post" action="#">
                                <div class="form-group col-md-4">
                                    <select id="queryUserRole" name="queryUserRole" class="form-control">
                                        <c:if test="${roleList != null}">
                                            <option value="">--请选择--</option>
                                            <c:forEach var="role" items="${roleList}">
                                                <option <c:if test="${role.id == queryUserRole }">selected="selected"</c:if> value=${role.id}>${role.roleName}</option>
                                            </c:forEach>
                                        </c:if>
                                    </select>
                                </div>
<%--                                第一次当前页肯定为一--%>
                                <input type="hidden" name="pageIndex" value="1"/>
                                <input class="form-control mr-sm-2" id="queryName" name="queryName" type="text" placeholder="请输入姓名" value="${queryName}">
                                <button class="btn btn-outline-primary" type="submit"><img src="static/images/SVG/搜索.svg"></button>
                            </form>
                            <a type="button" class="btn btn-success" href="/reachUser?userId=0">添加用户</a>
                        </div>
                    </nav>
                </div>
            </div>
            <div class="table-responsive">
                <c:if test="${sessionScope.msg1 != null}">
                    <div class="alert alert-success" role="alert">
                        <span>${sessionScope.msg1}</span>
                        <c:remove var="msg1" scope="session"></c:remove>
                    </div>
                </c:if>
                <c:if test="${sessionScope.msg0 != null}">
                    <div class="alert alert-danger" role="alert">
                        <span>${sessionScope.msg0}</span>
                        <c:remove var="msg0" scope="session"></c:remove>
                    </div>
                </c:if>


                <table class="table table-bordered">
                    <thead id="header">
                    <tr>
                        <th>用户编码</th>
                        <th>用户名称</th>
                        <th>性别</th>
                        <th>出生日期</th>
                        <th>联系电话</th>
                        <th>地址</th>
                        <th>职位</th>
                        <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="content">
                        <c:forEach var="user" items="${userList}">
                        <tr>
                            <td><span>${user.userCode}</span></td>
                            <td><span>${user.userName}</span></td>
                            <td>
                                <span>
								<c:if test="${user.gender==1}">男</c:if>
								<c:if test="${user.gender==2}">女</c:if>
							    </span>
                            </td>
                            <td><span>${user.birthday}</span></td>
                            <td><span>${user.phone}</span></td>
                            <td><span>${user.address}</span></td>
                            <td><span>${user.userRoleName}</span></td>
                            <td>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                <a type="button" class="btn btn-primary" href="/reachUser?userId=${user.id}">修改</a>
                                <a type="button" class="btn btn-primary" href="/deleteUser?userId=${user.id}">删除</a>
                                </div>
                            </td>
                        </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
            <div class="page-bar">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link disabled">共${totalCount}条记录&nbsp;&nbsp; ${currentPageNo }/<span id="totalPageCount">${totalPageCount}页</span></a>
                    </li>
                    <c:if test="${currentPageNo > 1}">
                        <li class="nav-item">
                            <a class="nav-link active" href="javascript:page_nav(document.forms[0],1);">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:page_nav(document.forms[0],${currentPageNo-1});">上一页</a>
                        </li>
                    </c:if>
                    <c:if test="${currentPageNo < totalPageCount }">
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:page_nav(document.forms[0],${currentPageNo+1 });">下一页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:page_nav(document.forms[0],${totalPageCount });">尾页</a>
                        </li>
                    </c:if>
                    <div class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2 page-key" name="inputPage" id="inputPage" type="text"  placeholder="Search" >
                        <a type="button" class="btn btn-outline-warning my-2 my-sm-0 page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</a>
                    </div>
                </ul>
            </div>
        </main>
    </div>
</div>
</body>
<script>
    function page_nav(frm,num){
        frm.pageIndex.value = num;
        frm.submit();
    }
    function jump_to(frm,num){
        //alert(num);
        //验证用户的输入
        var regexp=/^[1-9]\d*$/;
        var totalPageCount = document.getElementById("totalPageCount").value;
        //alert(totalPageCount);
        if(!regexp.test(num)){
            alert("请输入大于0的正整数！");
            return false;
        }else if((num-totalPageCount) > 0){
            alert("请输入小于总页数的页码");
            return false;
        }else{
            page_nav(frm,num);
        }
    }
</script>
</html>
